<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <div class="condition-container">
            <div class="condition">
              <span class="w70 color_494949 ft12 pr5">{{ translate('时间') }}：</span>
              <el-date-picker
                v-model="searchInfo3"
                end-placeholder="结束日期"
                range-separator="至"
                start-placeholder="开始日期"
                type="daterange"
                value-format="YYYY-MM-DD"
              />
            </div>
        </div>
        <div class="condition-container ml10">
            <div class="condition">
              <span class="w70 color_494949 ft12 pr5">{{ translate('天数') }}：</span>
              <el-input
                type="number"
                v-model="searchInfo"
                class="w164 mr10"
                :placeholder="translate('请输入天数')"
              />
            </div>
        </div>
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
        <el-button
          class="settingBtn"
          type="primary"
          @click="delFn"
          plain
        >
          {{ translate('删除') }}
        </el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column :label="translate('作业名称')">
          <template #default="{ row }">
            <div>{{ row.TaskName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="translate('创建时间')"
          prop="CreateDate"
          show-overflow-tooltip
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { QuartzLogData, delqlog } from '@/api/form'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        layout: 'total, sizes, prev, pager, next, jumper',
        translate: translate,
        searchInfo3: '',
      }
    },
    created() {
      this.getList()
    },
    methods: {
      delFn() {
        this.$confirm(translate('确认删除?'), translate('提示'), {
          confirmButtonText: translate('确定'),
          cancelButtonText: translate('取消'),
          type: 'warning',
        })
          .then(() => {
            this.delqlogs()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: translate('已取消删除'),
            })
          })
      },
      async delqlogs() {
        const params = this.searchInfo
        const data = await delqlog(params)
        if(data.code === '200') {
          this.$message({
              type: 'warning',
              message: translate('删除成功'),
            })
            this.getList()
        }
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'CreateDate', value: this.searchInfo3 ? this.searchInfo3[0] : '', displayType: 'ThanOrEqual' },
            { name: 'CreateDate', value: this.searchInfo3 ? this.searchInfo3[1] : '', displayType: 'LessOrequal' }
          ]),
          export: false,
          value: '',
        }
        const data = await QuartzLogData(params)
        this.tableData = data.data.rows
        this.total = data.data.total
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .ml10 {
      margin-left: 10px;
    }
    .condition-container {
      display: inline-block;
      margin-top: 10px;
    }
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
</style>
